"use client";

import { Box } from "@chakra-ui/react";
import Image from "next/image";
import { useTranslation } from "@/src/i18n";
import { getImgPath } from "@/src/utils";

const imgPath = getImgPath();

function Battery({
  value,
  charge_flag,
  mode,
}: {
  value: number;
  charge_flag: number;
  mode: string;
}) {
  const { t } = useTranslation("");

  const getBatteryIcon = () => {
    if (charge_flag === 1 || mode === "有线连接") {
      return `${imgPath}/svgs/battery_charge.svg`;
    } else if (value <= 5) {
      return `${imgPath}/svgs/battery_5.svg`;
    } else if (value <= 25) {
      return `${imgPath}/svgs/battery_25.svg`;
    } else if (value <= 50) {
      return `${imgPath}/svgs/battery_50.svg`;
    } else if (value <= 75) {
      return `${imgPath}/svgs/battery_75.svg`;
    }
    return `${imgPath}/svgs/battery_100.svg`;
  };

  const getBatteryText = () => {
    // console.log(value, charge_flag, mode);
    if (charge_flag === 1 || mode === "有线连接") {
      return t("charging");
    } else if (value <= 5) {
      return t("lessThan", { val: "5%" });
    } else if (value <= 25) {
      return t("lessThan", { val: "25%" });
    } else if (value <= 50) {
      return t("lessThan", { val: "50%" });
    } else if (value <= 75) {
      return t("lessThan", { val: "75%" });
    }
    return t("sufficientCharge");
  };

  const getBatteryColor = () => {
    return "#151515";
  };
  return (
    <div className="relative">
      <Box className="flex gap-1 items-center">
        <Image
          src={getBatteryIcon()}
          alt="battery status"
          width={24}
          height={24}
          className="w-[24px] h-[24px]"
        />
        <Box className={`text-sm font-medium ${getBatteryColor()}`}>
          {getBatteryText()}
        </Box>
      </Box>
    </div>
  );
}

export default Battery;
